<template>
	<view class="container pb-30 d-flex">
		<Navbar title="邀请注册" bgColor="#F2F4FF" />

		<view class="msg d-flex">
			<image src="/static/logo.png" mode="widthFix" class="logo mb-10"></image>
			<text class="title t-center bold mb-30">数据精灵</text>
			<text class="subtitle t-center bold mb-20">真诚，是一种生活态度</text>
			<text class="descripe t-center mb-20">大数据助力诚信生活</text>

			<view class="list mb-50">
				<view v-for="(item, index) of list" :key="item.id"
					:class="[index !== list.length -1 ? 'mb-20' : '', 'list_item d-flex']">
					<text class="list_item_title mb-5 bold">{{ item.title }}</text>
					<text class="list_item_describe">{{ item.describe }}</text>
				</view>
			</view>

			<view class="uqrcode d-flex mb-40">
				<text class="uqrcode_title mb-20">微信扫一扫，加入数据精灵</text>
				<view v-for="(row, rowI) in modules" :key="rowI" class="code d-flex">
					<view v-for="(col, colI) in row" :key="colI">
						<view v-if="col.isBlack" class="code_black">
							<!-- 黑色码点 -->
						</view>
						<view v-else class="code_white">
							<!-- 白色码点 -->
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<uv-divider class="mb-20" text="分享好友" :hairline="true" lineColor="rgba(194, 201, 205, 1)"></uv-divider>
		
		<view class="share d-flex">
			<view v-for="(item, index) of shareList" :key="index" :class="[index !== shareList.length - 1 ? 'mr-20' : '', 'share_item d-flex']">
				<Icon :name="item.icon" class="mb-30" size="65rpx" />
				<text class="share_item_title">{{ item.title }}</text>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		reactive,
		ref
	} from 'vue'
	import Icon from '@/components/Icon/index.vue';
	import UQRCode from '@/uni_modules/Sansnn-uQRCode/js_sdk/uqrcode/uqrcode.js';
	import Navbar from '@/components/Navbar/index.vue'

	const list = reactive([{
			title: '个人数据',
			describe: '个人基础信用数据、家政场景、婚恋场景，多维度数据帮助您更快了解自己和他人。',
			id: 1
		},
		{
			title: '企业数据',
			describe: '企业基础信用数据、案件、被执行、经营状况等数据帮助您全面了解企业未公开信息。',
			id: 1
		}
	])
	
	const shareList = reactive([
		{
			icon: 'weixin-circle-fill',
			title: '微信好友',
			color: '',
			id: 1
		},
		{
			icon: 'moments',
			title: '微信朋友圈',
			id: 2
		},
		{
			icon: 'download',
			title: '保存到手机',
			id: 1
		},
	])
	
	const modules = ref([])

	const onReady = () => {
		const qr = new UQRCode();
		qr.data = 'uQRCode';
		qr.make();
		modules.value = qr.modules;
	}
	
	onReady()
</script>

<style lang="scss" scoped>
	.container {
		flex-direction: column;
		padding: 25rpx;
		background: linear-gradient(to bottom, #F2F4FF, #fff);

		.msg {
			padding: 40rpx 25rpx;
			border: 1px solid #D7C8F5;
			border-radius: 18rpx;
			width: 560rpx;
			background: linear-gradient(to right, #EFF0FE, #F9F0F8);
			box-sizing: border-box;
			margin: auto;
			flex-direction: column;

			.logo {
				width: 80rpx;
				margin-left: auto;
				margin-right: auto;
			}

			.title {
				color: #404040;

				font: {
					size: 26rpx
				}
			}

			.subtitle {
				color: #404040;

				font: {
					size: 50rpx
				}
			}

			.descripe {
				color: #404040;

				font: {
					size: 28rpx
				}
			}

			.list {
				&_item {
					flex-direction: column;

					&_title {
						color: #333333;

						font: {
							size: 26rpx
						}
					}

					&_describe {
						color: #6C7282;

						font: {
							size: 26rpx
						}
					}
				}
			}
		}
		
		.uqrcode {
			flex-direction: column;
			align-items: center;
			justify-content: center;
			width: 400rpx;
			margin-left: auto;
			margin-right: auto;
			
			&_title {
				color: #404040;
				font: {
					size: 24rpx
				}
			}
			
			.code {
				flex-direction: row;
				
				&_black {
					width: 6px;
					height: 6px;
					background-color: black;
				}
				&_white {
					width: 6px;
					height: 6px;
					background-color: white;
				}
			}
		}
		
		.share{
			align-items: center;
			justify-content: space-between;
			
			&_item {
				align-items: center;
				justify-content: center;
				flex-direction: column;
				&_title {
					font: {
						size: 28rpx
					}
				}
			}
		}
	}
</style>